<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist-最简单的待办事列表</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
    <link rel="stylesheet" href="css/animate.min.css">
</head>

<body>
    <div id="app">
        <div @keydown.enter="AddWork">
            <input type="text" v-model="work">
        </div>
        <div>
            <h2>正在进行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{counting}}</h2>
            <div class="list">
                <transition-group name="slide" enter-active-class="animated bounceInLeft"
                    leave-active-class="animated bounceOutRight">
                    <div v-if="!item.isDone" :key="'doing'+index" v-for="item,index in doinglist">
                        <input type="checkbox" @click.prevent="Work(item)" :data-id="item.id">
                        <span>{{item.content}}</span>
                        <a @click="Remove(index)">移除</a>
                    </div>
                </transition-group>
            </div>
            <h2>已经完成&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{counted}}</h2>
            <div class="list">
                <transition-group name="slide"  enter-active-class="animated bounceInLeft"
                    leave-active-class="animated bounceOutRight">
                    <div v-if="item.isDone"  :key="'done'+index" v-for="item,index in donelist">
                        <input type="checkbox" @click.prevent="Work(item)" :data-id="item.id">
                        <span>{{item.content}}</span>
                        <a @click="Remove(index)">移除</a>
                    </div>
                </transition-group>
            </div>
        </div>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                work: '',
                counting: 0,
                counted: 0,
                todoList: []
                //,
                // doinglist:[],
                // donelist:[]
            },
            computed: {
                //通过过滤todolist数据，得到未做好的列表和已做好的列表

                doinglist: function () {
                    let arr = this.todoList.filter(function (item, index) {
                        return !item.isDone
                    })
                    return arr;
                }
                ,
                donelist: function () {
                    let arr = this.todoList.filter(function (item, index) {
                        return item.isDone
                    })
                    return arr;
                }
            },
            methods: {
                AddWork: function () {
                    this.todoList.push({ content: this.work, isDone: false, id: this.todoList.length });
                    this.saveData();
                    this.work = "";
                },
                Work: function (item) {
                    this.todoList[item.id].isDone = !this.todoList[item.id].isDone;
                    this.saveData();
                    //return item.isDone=!item.isDone;
                },
                Remove: function (index) {
                    this.todoList.splice(index, 1);
                    this.todoList.forEach(function (item, i) {
                        item.id = i;
                    });
                },
                saveData: function () {
                    localStorage.todoList = JSON.stringify(this.todoList);
                }
            },
            watch: {
                donelist: function () {

                    this.counted = this.donelist.length;
                },
                doinglist: function () {
                    this.counting = this.doinglist.length;
                }
            },
            mounted:function(){
                this.todoList=localStorage.todoList?JSON.parse(localStorage.todoList):[];
            } 
        })
    </script>
</body>

</html>